

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/layui/css/style.css?v=${.Config.basic.version}" media="all">

    <style>
        .layui-form-item .layui-inline {
            margin-bottom: 0;
            margin-right: 0;
        }
    </style>
    <style>
        /* .layui-table-view .layui-table td, .layui-table-view .layui-table th {
            padding: 5px 0;
            border-top: 1px solid #404453;
            border-left: 1px solid #404453;
            border-bottom: 1px solid #404453;
            border-right: 1px solid #404453;
        } */
    </style>
</head>
<body>
<div class="">


    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">关键字</label>
                        <div class="layui-input-inline">
                            <input type="text" lay-verify="" id=""  name="txt_key" lay-verify="" autocomplete="off" class="layui-input">
                        </div>
                    </div>


                    <div class="layui-inline">
                    </div>

                    <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="btn_search"><i class="layui-icon layui-icon-search"></i>查询</button>

                </div>
            </form>
            <table class="layui-hide" id="table" lay-filter="table"></table>
        </div>
    </div>
</div>

<table class="layui-hide" id="table" lay-filter="table"></table>
<script type="text/html" id="user_table_toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal layui-hide action-edit" lay-event="add">增加</button>
    </div>
</script>

<script type="text/html" id="table_action_bar">
    <a class="layui-btn layui-btn-normal layui-btn-xs layui-hide action-edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-hide action-delete" lay-event="del">删除</a>
</script>

<script src="../plugins/layui/layui.js"></script>
<script>
    var table=null;
    var form=null;
    var iconPicker =null;
    var Table=null;
    var sys_roles=null;
    var token = window.localStorage.getItem("token");
    var user_info=JSON.parse(window.localStorage.getItem("user_info"));
    var func_url="${.func_url}";
    var actions=[];
    var lay_index=null;
    var mode="";
    token = 'Bearer ' + token;
    layui.config({
        base: '../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','form','iconPicker'], function(){
        $ = layui.$;
        form = layui.form;
        table = layui.table;
        iconPicker = layui.iconPicker;

        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
            },
            // 渲染成功后的回调
            success: function(d) {
            }
        });

        $.ajax({
            type: 'GET',
            url: '../Api/User/Actions',
            data: {func_url:func_url},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                console.info(data)
                actions=data.data;
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载操作信息失败');
            }
        });
        //监听提交
        form.on('submit(btn_search)', function(data){
            //layer.alert(JSON.stringify(data.field), {title: '最终的提交信息'})
            search({key:data.field.txt_key});
            return false;
        });

        form.on('submit(btn_ok)', function(data){
            var field = data.field; //获取提交的字段
            $.ajax({
                type: mode,
                url: '../Api/Action',
                data: field,
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (data) {
                    //console.info(data)
                    if(data.code>=0){
                        layer.msg('保存成功');
                        layui.table.reload('table'); //重载表格
                        layer.close(lay_index); //再执行关闭
                    }else{
                        layer.alert('保存失败:'+data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('保存失败');
                }
            });
        });

        Table = table.render({
            elem: '#table'
            //,data:data
            ,url:'../Api/Action'
            ,height: 'full-80'
            ,method:'GET'
            ,headers : {'Authorization': 'Bearer '+window.localStorage.getItem("token")}
            ,where: {}
            ,page: false
            ,limit:30
            ,toolbar: '#user_table_toolbar' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['']
            ,title: '用户数据表'
            ,even:false
            ,cols: [[
                //{type: 'checkbox', fixed: 'left'}
                {field:'id', title:'ID', width:120, unresize: false, sort: true}
                ,{field:'name', title:'名称', width:150}
                ,{field:'name_en', title:'名称(英文)', width:150}
                ,{field:'icon', title:'图标', width:80,align:'center',templet: function(d){
                        var html='';
                        if(d.icon){
                            html="<i class=\"layui-icon "+d.icon+"\"></i>"
                        }else{

                        }
                        return html;
                    }}
                ,{title:'操作', toolbar:'#table_action_bar'}
            ]]
            ,done: function(res, curr, count){
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
            }
        });

        //头工具栏事件
        table.on('toolbar(table)', function(obj){
            switch(obj.event){
                case 'add':
                    onAdd();
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(table)', function(obj){
            var data = obj.data;
            console.log(data)
            if(obj.event === 'del'){
                onDelete(data);
            }
            else if(obj.event === 'edit'){
                onEdit(data);
            }
        });

    });

    function onAdd() {
        mode="POST";
        $("#form")[0].reset();
        layui.form.render();
        layer.open({
            //area: 'auto',
            area:['450px','400px'],
            type: 1,
            shade: 0.3,
            offset: '100px',
            title: '新增', //不显示标题
            content: $('#form'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            btn: ['确定', '取消']
            ,yes: function(index, layero){
                lay_index=index;
                var submit = layero.find("#btn_ok");
                submit.click();
            }
        });
    }

    function onEdit(item) {
        mode="PUT";
        layer.open({
            //area: 'auto',
            area:['450px','400px'],
            type: 1,
            shade: 0.3,
            offset: '100px',
            title: '修改', //不显示标题
            content: $('#form'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            btn: ['确定', '取消']
            ,yes: function(index, layero){
                lay_index=index;
                var submit = layero.find("#btn_ok");
                submit.click();
            }
        });

        layer.load(1);
        $.ajax({
            type: 'GET',
            url:"../Api/Action",
            data: {id:item.id},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            success: function(data){
                if(data){
                    form.val("form", data.data[0]);
                }

            },
            complete: function(XMLHttpRequest, textStatus) {
                layer.closeAll('loading');
            },
            dataType: "json"
        });
    }

    function onDelete(item) {
        layer.confirm('确认删除'+item.name+"?", function(index){
            //obj.del();
            layer.close(index);
            $.ajax({
                type: 'DELETE',
                url: '../Api/Action',
                data: item,
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (data) {
                    //console.info(data)
                    if(data.code==0){
                        //layer.msg('成功');
                        layui.table.reload('table'); //重载表格
                        layer.close(index); //再执行关闭
                    }else{
                        layer.alert('失败:'+data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('失败');
                }
            });
        });
    }

    function search(params) {
        Table.reload({
            where: params
            // ,page: {
            //     curr: 1 //重新从第 1 页开始
            // }
        });
    }


</script>
<script src="../js/check_screen.js?v=${.Config.basic.version}"></script>

</body>

<form class="layui-form " lay-filter="form" id="form" style="padding: 20px 30px 0 0;display:none;">
    <div class="layui-form-item">
        <label class="layui-form-label">ID</label>
        <div class="layui-input-block">
            <input type="text" name="id" lay-verify="required" placeholder="请输入ID" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">名称(英文)</label>
        <div class="layui-input-block">
            <input type="text" name="name_en" lay-verify="" placeholder="请输入名称(英文)" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="" class="layui-form-label">图标</label>
        <div class="layui-input-block">
            <input name="icon" type="text" id="iconPicker" value="layui-icon-component" lay-filter="iconPicker" class="hide">
        </div>
    </div>



    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="btn_ok" id="btn_ok" value="保存">
        <input type="button" lay-submit lay-filter="btn_cancel" id="btn_cancel" value="取消">
    </div>
</form>
</html>

